<!DOCTYPE HTML>
<html>
<head>
    <title>img element src attribute must match src list.</title>
    <script src='/resources/testharness.js'></script>
    <script src='/resources/testharnessreport.js'></script>
</head>
<body>
    <h1>img element src attribute must match src list.</h1>
    <p>
    <div id='log'></div>

    <script type="text/javascript">
      var t1 = async_test("img-src for relative path should load.");
      var t2 = async_test("img-src from unapproved domains should not load");
      var t3 = async_test("img-src from approved domains should load");
    </script>

    <img src='/content-security-policy/support/pass.png'
    onerror='t1.step(function() { assert_unreached("The img should have loaded."); t1.done() });'
    onload='t1.done();'>

    <img src='http://www1.web-platform.test/content-security-policy/support/fail.png'
    onerror='t2.done();'
    onload='t2.step(function() { assert_unreached("Image from unapproved domain was loaded."); t2.done()} );'>

    <div id='t3'></div>

    <script>
      var t3img = document.createElement('img');
      t3img.onerror = function() {t3.step(function() { assert_unreached(); t3.done();})}
      t3img.onload = function() {t3.done();}
      t3img.src = location.protocol + '//www.' + location.hostname + ':' + location.port +
           '/content-security-policy/support/pass.png';
      var t3div = document.getElementById('t3');
      t3div.appendChild(t3img);

      var report = document.createElement('script');
      report.src = '../support/checkReport.sub.js?reportField=violated-directive&reportValue=img-src%20%27self%27%20www.' + location.hostname + (location.port ? ':' + location.port : '');
      t3div.appendChild(report);

    </script>


</body>
</html>
